{% load i18n static %}
{% load common %}
{% autoescape off %}
  <div id="{{ model_name }}_edit_form" style="padding: 10px;height: 400px;width: 1000px;">
    <form class="layui-form data-form time-interval-form" action="" method="post" lay-filter="timetableForm">
      <input type="hidden" id="id_model_pk" data-name="pk" value="{{ object_id }}"/>
      {% csrf_token %}
      {% with adminform.form as f %}
        <div class="base-setting base-setting-large1">
          <div class="layui-form-item" style="border-bottom: 1px solid #e6e6e6">
            {% layui_inline f.alias %}
            {% layui_inline f.use_mode %}
          </div>
          <div class="layui-form-item" data-name="normal">
            {% layui_inline f.in_start %}
            {% layui_inline f.out_start %}
          </div>
          <div class="layui-form-item" data-name="normal">
            {% layui_inline f.in_time %}
            {% layui_inline f.out_time %}
          </div>
          <div class="layui-form-item" data-name="normal" style="border-bottom: 1px solid #e6e6e6">
            {% layui_inline f.in_end %}
            {% layui_inline f.out_end %}
            <div class="layui-collapse" lay-filter="breakTimeCollapse">
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">{% trans 'breakTime_setting' %}</h2>
                <div class="layui-colla-content">
                  <div id="id_break_div" style="height: 150px;border: 1px solid #d5d8d2; ">
                    <table id="id_break_table" class="layui-table" lay-filter="break_table" width="100%">
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            {% layui_inline f.in_required %}
            {% layui_inline f.out_required %}
          </div>
          <div class="layui-form-item" data-name="normal" style="border-bottom: 1px solid #e6e6e6">
                {% layui_inline f.use_24_mode %}
          </div>
          <div class="layui-form-item" data-name="flexible">
            {% layui_inline f.critical_time %}
            {% layui_inline f.work_type %}
          </div>
          <div class="layui-form-item" data-name="normal">
            {% layui_inline f.allow_late %}
            {% layui_inline f.allow_leave_early %}
          </div>
          <div class="layui-form-item" id="interval_ot_setting" style="border-bottom: 1px solid #e6e6e6">
            <div class="layui-form-item" data-name="normal">
              {% layui_inline f.ahead_overtime %}
              {% layui_inline f.minimum_ahead_overtime %}
              <span style="width: 223px; min-width: 0px; max-width: 223px;">{% trans 'minutes' %}</span>
            </div>
            <div class="layui-form-item" data-name="normal">
              {% layui_inline f.above_overtime %}
              {% layui_inline f.minimum_above_overtime %}
              <span style="width: 223px; min-width: 0px; max-width: 223px;">{% trans 'minutes' %}</span>
            </div>
          </div>

          <div class="layui-form-item" data-name="flexible">
            {% layui_inline f.work_time_type %}
            {% layui_inline f.work_time_duration %}
          </div>
          <div class="layui-form-item">
            {% layui_inline f.available_interval_type %}
            {% layui_inline f.available_interval %}
          </div>
          <div class="layui-form-item" data-name="flexible">
            {% layui_inline f.use_overtime_ft %}
            {% layui_inline f.minimum_overtime_ft %}
          </div>
          <div class="layui-form-item">
            {% layui_inline f.work_day %}
            {% layui_inline f.func_key %}
          </div>
          <div class="layui-form-item" data-name="flexible">
            {% layui_inline f.multiple_punch %}
          </div>
          <div class="layui-hidden">{{ f.break_time }}</div>
          <div style="width: 100%;" class="layui-form-item" id="break-time-block" data-name="normal">

          </div>
        </div>
      {% endwith %}
    </form>
    {% block from_button %}

    {% endblock %}
  </div>
  <script>
    layui.use(['element', 'form', 'laydate'], function () {
      var form = layui.form, element=layui.element, laydate = layui.laydate;
      //element.on('collapse(breakTimeCollapse)', function(data){
      //  layer.msg('展开状态：'+ data.show);
      //});
      $("form.layui-form input.layui-time").each(function () {
        laydate.render({elem: this, type: 'time'});
      });
      element.render();
      form.render();
    });
    $(function () {
      var form = layui.form;
      var table = layui.table;
      table.on('checkbox(break_table)', function (/*obj*/) {
        var bts = [];
        var all_checked = $("#id_break_div tbody input[type='checkbox']:checked");
        all_checked.each(function () {
          var id = $(this).parent().parent().parent().find("td:eq(1)").find('div.layui-table-cell').text();
          bts.push(id);
          $('#id_break_time').val('').val(bts);
          {#console.log('bts in breaktime:' + $('#id_break_time').val());#}
        });
        var ck = all_checked.length;
        if (ck === 0) {
          $('#id_break_time').val('');
        }
      });
      $("#id_work_day").attr("min", "0.1").attr("max", "9.9");
      $("#id_work_time_duration").attr("min", "0").attr("max", "1440");
      $("#id_available_interval").attr("min", "0").attr("max", "240");
      $("#id_minimum_overtime_ft").attr("min", "0").attr("max", "1440");
      $("#id_allow_late").attr("min", "0").attr("max", "1440");
      $("#id_allow_leave_early").attr("min", "0").attr("max", "1440");
      $("#id_minimum_ahead_overtime").attr("min", "0").attr("max", "1440");
      $("#id_minimum_above_overtime").attr("min", "0").attr("max", "1440");
      form.render();
    });

    $(function () {
      var form = layui.form,
          $form_selector_str = '#{{ model_name }}_edit_form';
      form.on('select', function (data) {
        var elem = data.elem;
        var selectValue = data.value;
        switch (elem.id) {
          case 'id_available_interval_type':
            if (selectValue === '0') {
              $("#id_available_interval").attr("disabled", "disabled");
            }
            if (selectValue === '1') {
              $("#id_available_interval").removeAttr("disabled");
            }
            break;
          case 'id_work_time_type':
            if (selectValue === '1') {
              $("#id_work_time_duration").attr("disabled", "disabled");
            }
            if (selectValue === '2') {
              $("#id_work_time_duration").removeAttr("disabled");
            }
            break;
          case 'id_ahead_overtime':
            if (selectValue === '0') {
              $("#id_minimum_ahead_overtime").attr("disabled", "disabled");
            }
            if (selectValue === '1') {
              $("#id_minimum_ahead_overtime").removeAttr("disabled");
            }
            break;
          case 'id_above_overtime':
            if (selectValue === '0') {
              $("#id_minimum_above_overtime").attr("disabled", "disabled");
            }
            if (selectValue === '1') {
              $("#id_minimum_above_overtime").removeAttr("disabled");
            }
            break;
          case 'id_use_overtime_ft':
            if (selectValue === '0') {
              $("#id_minimum_overtime_ft").attr("disabled", "disabled");
            }
            if (selectValue === '1') {
              $("#id_minimum_overtime_ft").removeAttr("disabled");
            }
            break;
          case 'id_use_mode':
            typeSwitch(selectValue);
            fillOriginData(selectValue);
            if(selectValue === '1'){
              form.val('timetableForm', {work_time_type: 2, work_time_duration: 480});
              $("#id_work_time_duration").removeAttr("disabled");
            }
            form.render('select');
            break;
          case 'id_multiple_punch':
            if (selectValue === '1') {
              $("#interval_ot_setting").hide();
            }
            if (selectValue === '0') {
              $("#interval_ot_setting").show();
            }
            break;
          case 'id_work_type':
            if(selectValue === '0'){
              form.val('timetableForm', {work_time_type: 2, work_time_duration: 480});
            }else if (selectValue === '1'){
              form.val('timetableForm', {use_overtime_ft: 1, work_time_type: 2, work_time_duration: 0});
              $("#id_minimum_overtime_ft").removeAttr("disabled");
            }else if (selectValue === '2'){
              form.val('timetableForm', {use_overtime_ft: 1, work_time_type: 2, work_time_duration: 0});
              $("#id_minimum_overtime_ft").removeAttr("disabled");
            }
          default:
            break;
        }
      });

      function typeSwitch(timeIntervalType) {
        if (timeIntervalType === '0') {
          $("div[data-name='flexible']", $form_selector_str).hide();
          $("div[data-name='normal']", $form_selector_str).show();
        }
        if (timeIntervalType === '1') {
          $("div[data-name='flexible']", $form_selector_str).show();
          $("div[data-name='normal']", $form_selector_str).hide();
        }
      }

      function fillOriginData(timeIntervalType) {
        if (timeIntervalType === '0') {
          $("div[data-name='flexible']", $form_selector_str).find("input, select").each(function () {
            $(this).val($(this).attr('data'));
          });
        }
        if (timeIntervalType === '1') {
          $("div[data-name='normal']", $form_selector_str).find("input, select").each(function () {
            $(this).val($(this).attr('data'));
          });
        }
      }

      function setOriginData() {
        $("div[data-name='normal']", $form_selector_str).find("input, select").each(function () {
          $(this).attr('data', $(this).val());
        });
        $("div[data-name='flexible']", $form_selector_str).find("input, select").each(function () {
          $(this).attr('data', $(this).val());
        });
        init_break_table();
      }

      function init_break_table() {
        var url = '/att/get_break_time_list/';
        $.ajax({
          url: url,
          type: 'GET',
          dataType: 'json',
          success: function (callback) {
            var table = layui.table;
            var data = callback['ret'];
            var bts = $("#id_break_time").val();
            var newData = [];
            data.forEach(function (item/*, index*/) {
              if (bts) {
                for (var i = 0; i < bts.length; i++) {
                  if (bts[i] === item.id.toString()) {
                    item['LAY_CHECKED'] = true;
                  }
                }
              }
              newData.push(item);
            });
            table.render({
              elem: "#id_break_table"
              , data: newData
              , page: true
              , text: {none: gettext('none_data')}
              , cols: [[
                {type: 'checkbox'},
                {field: 'id', title: "{% trans 'breakTime_number' %}"},
                {field: 'alias', title: "{% trans 'breakTime_field_alias' %}"},
                {field: 'period_start', title: "{% trans 'breakTime_field_startTime'%}"},
                {field: 'period_end', title: "{% trans 'breakTime_field_endTime' %}"},
                {field: 'required_duration', title: "{% trans 'breakTime_field_duration' %}"},
                {field: 'calc_type', title: "{% trans 'break_time_calculate_type' %}"}
              ]]
            });
          }
        });
      }

      function pageInit() {
        var timeIntervalType = $("#id_use_mode").val();
        typeSwitch(timeIntervalType);
        var elements = [[$("#id_ahead_overtime"), $("#id_minimum_ahead_overtime")],
          [$("#id_above_overtime"), $("#id_minimum_above_overtime")],
          [$("#id_use_overtime_ft"), $("#id_minimum_overtime_ft")]];
        $(elements).each(function () {
          var selectElem = $(this)[0];
          var inputElem = $(this)[1];
          if ($(selectElem).val() === '0') {
            $(inputElem).attr("disabled", "disabled");
          }
        });
        if ($("#id_available_interval_type").val() === '0') {
          $("#id_available_interval").attr("disabled", "disabled");
        }
        if ($("#id_work_time_type").val() === '1') {
          $("#id_work_time_duration").attr("disabled", "disabled");
        }
        setOriginData();

        if ($("#id_multiple_punch").val() === '1') {
          $("#interval_ot_setting").hide();
        }
        else {
          $("#interval_ot_setting").show();
        }
      }
      pageInit();
    });
  </script>
{% endautoescape %}